<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>会员注册界面</title>
    <link rel="stylesheet" href="../style.css" />
  </head>
  <body>
    <form action="../test.html" method="get">
    <table align="center" width="60%">
      <caption>
        <h3 style="text-align: left; color: blue">会员注册界面</h3>
      </caption>
      <!--手机号码-->
      <tr>
        <td>
          <label for="phone" id="title">手机号码：</label
          ><input
            type="text"
            id="vcode"
            name="phone"
            placeholder="11位手机号码"
          />
          <span id="bt">必填</span>
        </td>
      </tr>
      <!-- 创建密码-->
      <tr>
        <td>
          <label for="pwd" id="title">创建密码：</label
          ><input
            type="password"
            id="vcode"
            name="pwd"
            maxlength="8"
            placeholder="长度8个字符"
          />
          <span id="bt">必填</span><br />
        </td>
      </tr>
      <!-- 邮箱 -->
      <tr>
        <td>
          <label for="eamil" id="title">注册邮箱：</label
          ><input
            type="text"
            id="vcode"
            name="eamil"
            placeholder="可用的邮箱地址"
          />
          <span id="bt">必填</span><br />
        </td>
      </tr>
      <!-- 验证码 -->
      <tr>
        <td>
          <label for="yzm" id="title">验证码：</label
          ><input
            type="text"
            id="vcode"
            placeholder="验证码"
            onfocus="this.value=''"
            onblur="if(this.value=='')this.value='验证码'"
          />
          <span id="code"></span
          ><span title="看不清，换一张"
            ><img src="../images/arrow_03.png" alt="" id="next" /></span
          ><br />
        </td>
      </tr>
      <!-- 性别 -->
      <tr>
        <td>
          <label for="sex" id="title">性别：</label>
          <label>
            <input type="radio" name="sex" value="male" checked="checked" /> 男
          </label>
          <label> <input type="radio" name="sex" value="female" /> 女 </label>
        </td>
      </tr>
      <!-- 生日 -->
      <tr>
        <td>
            <label for="birthday" id="title">生日：</label>
          <input type="date" id="select1" name="mydate" /></label
        >
        </td>
      </tr>
      <!-- 年龄 -->
      <tr>
        <td>
            <label for="age" id="title">年龄：</label
                ><input type="text" id="vcode" name="age" /><br />
        </td>
      </tr>
      <!-- 籍贯 -->
      <tr>
        <td>
            <label for="homtown" id="title">籍贯：</label>
        <select id="select1"></select
        >
        <select id="select1"></select
        >
        <select id="select1"></select
        >
        <script src="city.js"></script>
        <script src="cascading.js"></script>
        </td>
      </tr>
      <!-- 学历 -->
      <tr>
        <td>
            <label for="collage" id="title">个人学位：</label>

        <select name="collage" id="select1" size="1">
          <option value="collage">博士后</option>
          <option value="collage">博士</option>
          <option value="collage">硕士</option>
          <option value="collage">学士</option></select
        >
        </td>
      </tr>
      <!-- 月薪 -->
      <tr>
        <td>
            <label for="moneymonth" id="title">月薪：</label>
        <input
          type="range"
          id="money"
          name="money"
          min="5"
          max="100"
          step="1"
          value="10"
        />
        <span id="msg"></span><span>k</span>
        </td>
      </tr>
      <!-- 爱好 -->
      <tr>
        <td>
            <label for="like" id="title">个人爱好：</label>
            <label>
              <input type="checkbox" name="like" value="football" />唱
            </label>
            <label>
              <input type="checkbox" name="like" value="basketball" />跳
            </label>
            <label>
              <input type="checkbox" name="like" value="football" />rap
            </label>
            <label>
              <input type="checkbox" name="like" value="basketball" />篮球 </label
            >
        </td>
      </tr>
      <!-- 个人照片 -->
      <tr>
        <td>
            <label for="photo" id="title" >个人照片：</label>
                <input type="file" id="test-image-file" name="test" />
                <p id="test-file-info"></p>
        <div id="test-image-preview" >
        </td>
      </tr>
      <!-- 个人简历 -->
      <tr>
        <td>
            <label id="title">个人简介：</label>
            <textarea name="intro" cols="50" rows="10" >请填写个人简历</textarea>
        </td>
      </tr>
      <tr>
        <td >
            <button type="submit">提交</button>
            <button type="reset">重填</button>
        </td>
      </tr>
    </table>
</form>
  </body>
  <script>
    var msg = document.getElementById("msg"); // 根据id值找到span元素
    window = function () {
      msg.innerHTML = document.getElementById("money").value; // 获取区间域初始value值
    };
    document.getElementById("money").onchange = function () {
      msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
    };
  </script>
  <script>
    var fileInput = document.getElementById("test-image-file");
    var info = document.getElementById("test-file-info");
    var preview = document.getElementById("test-image-preview");
    fileInput.addEventListener("change", function () {
      // 监听change事件
      preview.style.backgroundImage = ""; // 清除背景图片
      if (!fileInput.value) {
        info.innerHTML = "没有选择文件";
        return;
      }
      var file = fileInput.files[0]; // 获取File引用
      // 获取File信息:
    //   info.innerHTML =
    //     "文件: " +
    //     file.name +
    //     "<br>" +
    //     "大小: " +
    //     file.size +
    //     "<br>" +
    //     "修改: " +
    //     file.lastModifiedDate;
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        alert("不是有效的图片文件!");
        return;
      }
      var reader = new FileReader(); // 读取文件
      reader.onload = function (e) {
        // 发起一个异步操作来读取文件内容
        var data = e.target.result; // data串形如： '...(base64编码)...'
        preview.style.backgroundImage = "url(" + data + ")";
      };
      reader.readAsDataURL(file); // 以DataURL的形式读取文件
    });
  </script>
  <script type="text/javascript">
    var code; //声明一个变量用于存储生成的验证码
    document.getElementById("next").onclick = changeImg;
    function changeImg() {
      var arrays = new Array(
        "1","2","3","4","5","6","7","8","9","0","a","b","c","d","e","f","g","h","i",
        "j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
        "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O",
        "P","Q","R","S","T","U","V","W","X","Y","Z" );
      code = ""; //重新初始化验证码
      //alert(arrays.length);
      //随机从数组中获取四个元素组成验证码
      for (var i = 0; i < 4; i++) {
        //随机获取一个数组的下标
        var r = parseInt(Math.random() * arrays.length);
        code += arrays[r];
      }
      document.getElementById("code").innerHTML = code; //将验证码写入指定区域
    }

    //效验验证码(表单被提交时触发)
    function check() {
      //获取用户输入的验证码
      var input_code = document.getElementById("vcode").value;
      // if (input_code.toLowerCase() == code.toLowerCase()) {
      //   //验证码正确(表单提交)
      //   return true;
      // }
      // alert("请输入正确的验证码!");
      // //验证码不正确,表单不允许提交

      // return false;
    }
  </script>
</html>
